<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <div class="area ">
        <p class="title">当前城市</p>
        <ul class="button-wrapper">
          <li class="botton">{{this.$store.state.city}}</li>
        </ul>
      </div>
      <div class="area">
        <p class="title">热门城市</p>
        <ul class="button-wrapper">
          <!--  调用公共数据池数据，并把item 作为参数传递过去   -->
          <li class="botton" @click="handleCityClick(item.name)" v-for="item of hot" :key="item.id">{{item.name}}</li>
        </ul>
      </div>
      <div class="area border-bottom" v-for="(item,key) of cities" :key="item.id" :ref="key">
        <div class="title border-bottom">{{key}}</div>
        <ul class="itemlist">
          <li class="item border-bottom" @click="handleCityClick(innerItem.name)" v-for="innerItem of item"
              :key="innerItem.id">{{innerItem.name}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  // 引入bscroll 页面滑动
  import BScroll from 'better-scroll'
  // 优化vuex 编写语法，采用原生高级API
  import {mapState} from 'vuex'

  export default {
    name: 'CityList',
    // props是子组件访问父组件数据的唯一接口
    props: {
      hot: Array,
      cities: Object,
      letter: String
    },
    // 计算属性
    computed: {
      // 公用数据： 我把vuex 里面的数据映射到当前组件的computed计算属性里，映射值 city
      ...mapState({currentCity: 'city'})
    },
    // 方法
    methods: {
      handleCityClick (city) {
        // city 点击当前城市的 名称
        console.log(city)

        //  通过 dispatch 传递数据到 -- 共享数据池
        // this.$store.dispatch('changeCity', city)

        this.$store.commit('changeCity', city)
        // this.changeCity(city)

        // 编程式导航、页面路由跳转
        this.$router.push('/')
      },
      // 公用数据： 我把vuex 里面的数据映射到当前组件里，映射值 changeCity
      // ...mapMutations(['changeCity'])
    },
    // 侦听器
    watch: {
      // 监听leeter 值发生改变时，当前列表页滚动到对应字母区域
      letter () {
        console.log('list组件侦听器：' + this.letter)
        // $refs 获取元素DOM，是一个数组第一个元素就是字母，
        console.log(this.$refs)

        // 判断如果 letter 为真
        if (this.letter) {
          // 获取 ref自定义的 key值，key值 完全对应 滑动区域
          const element = this.$refs[this.letter][0]
          console.log(element)
          // 自动滑动到对应位置
          this.scroll.scrollToElement(element)
        }
      }
    },
    // 当页面挂载完毕执行生命周期钩子
    mounted () {
      // 页面滑动插件，滑动的是(wrapper 这个DOM ，DOM是通过ref属性定义，$refs获取该DOM)
      this.scroll = new BScroll(this.$refs.wrapper,{

      })
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .border-topbottom
    &:before
      border-color #ccc

    &:after
      border-color #ccc

  .wrapper
    wrapper()
    overflow hidden
    position absolute
    top 2rem
    left 0
    bottom 0
    right 0

  .title
    line-height .44rem
    color #666
    font-size .26rem
    margin .2rem 0


  .button-wrapper
    width 100%
    display flex
    flex-wrap wrap


  .botton
    box-sizing border-box
    background white
    width 30%
    text-align center
    padding .2rem
    margin-bottom .2rem
    margin .1rem

  .itemlist
    line-height .76rem
    background white
    text-indent .2rem


</style>
